<template>
    <div v-loading="loading">
        <el-form :model="systemInfoForm" label-width="80px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="系统代码">
                        <el-input v-model="systemInfoForm.sysCode" placeholder="请输入系统代码" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="系统名称">
                        <el-input v-model="systemInfoForm.sysName" placeholder="请输入系统名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="类型">
                        <el-select v-model="systemInfoForm.type" placeholder="请选择类型" style="width: 100%;" clearable>
                            <el-option
                                v-for="(item, index) in typeOptions"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="margin-left: 5px;">
                    <el-button icon="el-icon-search" @click="handleSearch"></el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="handleOperate(true)"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-card style="margin-right: 10px;">
            <el-table
            :data="systemInfoList"
            :height="height"
            stripe
            highlight-current-row>
                <el-table-column
                    v-for="(column, index) in columns"
                    :key="index"
                    :prop="column.prop"
                    :label="column.label"
                ></el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleOperate(false, scope.row)">编辑</el-button>
                        <el-popover
                            placement="left"
                            width="160"
                            :ref="`popover-${scope.$index}`">
                            <p>确定删除当前行吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button type="text" @click="handleClose(scope.$index)">取消</el-button>
                                <el-button type="primary" @click="deleteOperate(scope.row, scope.$index)">确定</el-button>
                            </div>
                            <el-button style="margin-left: 5px;" type="text" slot="reference">删除</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            style="margin-top: 10px;text-align: right;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[10, 15, 50, 100]"
                :page-size="15"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <SysInfoOperate v-model="isShowOperate" :flag="flag" :updateData="updateData" @success="querySystemInfoList"></SysInfoOperate>
    </div>
</template>

<script>
/**
* @description: 系统信息
* @create: 2020-08-31
* @author: niuwenli
*/
import { columns } from './config';
import SysInfoOperate from './sys-info-operate';
export default {
    name: 'SystemInfo',
    props: {},
    components: { SysInfoOperate },
    data () {
        return {
            systemInfoForm: {
                sysCode: '',
                sysName: '',
                type: ''
            },
            // 列
            columns: columns(),
            total: 0,
            systemInfoList: [],
            // 类型
            typeOptions: [
                {
                    label: '项目',
                    value: '0'
                },
                {
                    label: '服务',
                    value: '1'
                }
            ],
            // 是否显示新增弹框
            isShowOperate: false,
            height: 0,
            flag: false,
            // 编辑数据
            updateData: {},
            pageNum: 1,
            pageSize: 10,
            params: {},
            loading: false
        };
    },
    created () {
        this.querySystemInfoList();
        window.addEventListener('resize', this.computedHeight());
        this.$nextTick(() => {
            this.computedHeight();
        });
    },
    computed: {
        finalParam () {
            return {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                params: this.params
            }
        }
    },
    methods: {
        // 删除弹框
        handleClose (index) {
            this.$refs[`popover-${index}`].doClose();
        },
        // 获取高度
        computedHeight () {
            this.height = this.$root.$el.clientHeight - 188;
        },
        // 查询系统信息数据
        querySystemInfoList () {
            this.loading = true;
            this.$axios.get(`${this.baseUrl}sys_info/page`, {
                params: this.finalParam
            }).then(res => {
                this.loading = false;
                this.systemInfoList = res.data.data.rows.map(item => {
                    item.type = item.type === '0' ? '项目' : '服务';
                    return item;
                });
                this.total = res.data.data.total;
            }).catch(() => {
                this.loading = false;
            });
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.querySystemInfoList();
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.querySystemInfoList();
        },
        // 搜索
        handleSearch () {
            this.params = {};
            Object.keys(this.systemInfoForm).forEach(key => {
                let val = this.systemInfoForm[key];
                if (this.systemInfoForm[key].length !== 0) {
                    this.params[key] = val;
                }
            });
            this.pageNum = 1;
            this.querySystemInfoList();
        },
        // 新增
        async handleOperate (flag, row) {
            this.flag = flag;
            if (!flag) {
                this.updateData = await this.queryById(row.rowId);
            }
            this.isShowOperate = true;
        },
        // 单条查询接口
        queryById (rowId) {
            return new Promise((resolve, reject) => {
                this.$axios.get(`${this.baseUrl}sys_info/${rowId}`).then(res => {
                    resolve(res.data.data);
                }).catch(() => {
                    reject();
                });
            });
        },
        // 删除
        deleteOperate (row, index) {
            this.loading = true;
            this.$axios.delete(`${this.baseUrl}sys_info/${row.rowId}`).then(res => {
                this.loading = false;
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                this.$refs[`popover-${index}`].doClose();
                this.querySystemInfoList();
            }).catch(() => {
                this.loading = false;
            });
        }
    }
};
</script>
<style>

</style>